<template>
    <el-card class="list">
        <template #header>
            <div class="nav">
                <div class="title">
                    方案模版库
                </div>
                <div>
                    <el-icon class="pointer" @click="toAddTpl">
                        <Plus />
                    </el-icon>
                </div>
            </div>
        </template>
        <el-input class="input" v-model="listForm.keyword" placeholder="搜索方案标题" prefix-icon="Search"></el-input>
        <div class="titleList" :infinite-scroll-disabled="infiniteScrollDisabled" :infinite-scroll-immediate="false" v-infinite-scroll="load">
            <div class="titleCard" v-for="item in titleList" :key="item.id">
                <img :src="item.coverPath" alt="">
                <h2>{{item.name}}</h2>
                <div class="titleCardBtn">
                    <el-button type="text" @click="toSubsection(item)">分段使用</el-button>
                    <el-button type="text" @click="setHtml(item)">整套使用</el-button>
                    <el-button type="text" @click="toPreview(item)">预览</el-button>
                </div>
            </div>
        </div>
        <Preview ref="previewRef" :html="html" />
    </el-card>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import  {tplList} from '../api/req.js'
import Preview from '@/components/preview/index.vue'
import {useRouter} from 'vue-router'


const listForm = reactive({
    page: 1,
    pageSize: 5,
    keyword: ''
})
const emit = defineEmits(['setType', 'resetHtml'])
const titleList = ref([])

const toSubsection = (item) => {
    emit('setType', 'subsection', item)
}
const infiniteScrollDisabled = ref(false);
const getList  = async (flag) => {
    try {
        let res = await tplList(listForm)
        if (res.code === 0) {
            if (flag) {
                titleList.value = res.data.list
            } else {
                if (res.data.list.length) {
                    titleList.value = titleList.value.concat(res.data.list)
                } else {
                    infiniteScrollDisabled.value = true
                }
            }
        }
    } catch (error) {
        console.log(error)
    }
}

const load = () => {
    listForm.page += 1;
    getList()
}

onMounted(() => {
    getList()
})

const setHtml = (item) => {
    emit('resetHtml', item.doc)
}

const router = useRouter()
const toAddTpl = () => {
    router.push({
        path: '/layout/penetration/templates/addScheme'
    })
}
const html = ref('');
const previewRef = ref(null);
const toPreview = (item) => {
    html.value = item.doc;
    previewRef.value.showdialog();
}
</script>

<style lang="scss" scoped>
.list {
    width: 300px;
    margin-right: 5px;
    display: flex;
    flex-direction: column;
    ::v-deep .el-card__body {
        flex: 1;
        overflow: hidden;
        margin-top: 5px;
        padding: 10px;
        display: flex;
        flex-direction: column;
    }

    .nav {
        line-height: 32px;
        padding: 0 10px;
        display: flex;
        justify-content: space-between;
    }
    .input {
        margin-bottom: 10px;
    }
    .titleList {
        flex: 1;
        overflow: auto;
        .titleCard {
            margin-top: 5px;
            padding: 5px;
            border: 1px dashed #ccc;

            img {
                width: 100%;
                height: 150px;
            }

            h2 {
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }

            .titleCardBtn {
                display: flex;
                justify-content: space-around;
            }
        }
    }
    .pointer {
        cursor: pointer;
    }
}
</style>